import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import ListItem from '@/components/ListItem';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';

const norGrayColor = '#a9a9a9';

const dstyles = GStyleSheet.create({
  listItem: {
    paddingTop: 5,
    paddingBottom: 5,
    flex: 1,
    minWidth: 0,
  },
  listTitle: {
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
  },
  listTitleText: {
    fontSize: 16,
    fontWeight: '500',
    color: DynamicColors.normalTextColor,
  },
  listContent: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  consumer: {
    flex: 1,
    minWidth: 0,
    display: 'flex',
  },
  listContentText: {
    fontSize: 12,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    color: DynamicColors.subTitleTextColor,
  },
  listTimeText: {
    width: 120,
    fontSize: 12,
    textAlign: 'right',
    color: norGrayColor,
  },
  pushMessageIcon: {
    width: 50,
    height: 50,
  },
  pushMessageRedPoint: {
    width: 8,
    height: 8,
    backgroundColor: 'red',
    borderRadius: 4,
    left: 5,
  },
  devieIcon: {
    width: 45,
    height: 45,
  },
  redPoint: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    position: 'absolute',
    right: -6,
    top: -2,
  },
  redPointText: {
    color: '#fff',
    fontSize: 12,
    height: 20,
    lineHeight: '20px',
    textAlign: 'center',
  },
});

interface IProps {
  onPress: () => void;
  image: string;
  title: string | React.ReactNode;
  unreadCount: number;
  content: string;
  time: string;
  key: any;
  textColor?: string;
  prefix: React.ReactNode;
}

export default class NotiItem extends React.Component<IProps> {
  render() {
    const styles = dstyles.style;
    const { title, image, content, time, unreadCount, key, textColor, onPress, prefix } = this.props;
    let icon, titleView;
    icon = (
      <View style={{ position: 'relative', width: 45 }}>
        <Image src={image} style={styles.devieIcon} />
        {unreadCount > 0 ? (
          <View style={{ ...styles.redPoint, ...(unreadCount > 99 ? { width: 28 } : null) }} className='centerFlex'>
            <Text style={styles.redPointText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
          </View>
        ) : null}
      </View>
    );
    return (
      <ListItem icon={icon} key={key} onPress={onPress} contentStyle={{ width: '100%' }}>
        <View style={styles.listItem}>
          <View style={styles.listTitle}>
            <Text style={styles.listTitleText}>{title}</Text>
            {titleView}
          </View>
          <View style={styles.listContent}>
            <View style={styles.consumer}>
              {prefix}
              <Text style={{ ...styles.listContentText, ...textColor ? { color: textColor } : {} }}>
                {content}
              </Text>
            </View>
            {time ? (
              <View>
                <Text style={styles.listTimeText}>{time}</Text>
              </View>
            ) : null}
          </View>
        </View>
      </ListItem>
    );
  }
}
